<template>
  <div class="installPhone">
    <div class="top">
      <div class="title">信息填写</div>
      <div class="topinfo">
        <div class="post">姓名</div>
        <div>
          <input
            type="text"
            placeholder="请输入姓名"
            v-model="form.name"
          />
        </div>
      </div>
      <div class="topinfo">
        <div class="post">性别</div>
        <div @click="showPicker('sex')">
          <p :style="{'color': form.sex?'#333333' :'#cccccc'}">{{form.sex ? form.sex : '请选择性别'}}</p>
        </div>
      </div>
      <div class="topinfo">
        <div class="post">民族</div>
        <div>
          <input
            type="text"
            placeholder="请输入民族"
            v-model="form.peopleType"
          />
        </div>
      </div>
      <div class="topinfo">
        <div class="post">固定电话</div>
        <div>
          <input
            type="text"
            placeholder="请输入固定电话"
            v-model="form.phone"
          />
        </div>
      </div>
      <div class="topinfo"  @click="showDatePickerP('borthDate')">
        <div class="post">出生年月</div>
        <div>
          <p :style="{'color': form.borthDate?'#333333' :'#cccccc'}">{{form.borthDate ? form.borthDate : '请选择'}}</p>
        </div>
      </div>
      <div class="topinfo">
        <div class="post">其他电话</div>
        <div>
          <input
            type="text"
            placeholder="请输入其他电话"
            v-model="form.otherPhone"
          />
        </div>
      </div>
      <div class="topinfo">
        <div class="post">手机号</div>
        <div>
          <input
            type="text"
            placeholder="请输入手机号"
            v-model="form.tel"
          />
        </div>
      </div>
      <div class="topinfo">
        <div class="post">身份证号</div>
        <div>
          <input
            type="text"
            placeholder="请输入身份证号"
            v-model="form.sfzh"
          />
        </div>
      </div>
      <div class="topinfo">
        <div class="post">既往病例</div>
        <div>
          <input
            type="text"
            placeholder="请输入既往病例"
            v-model="form.jwbl"
          />
        </div>
      </div>
      <div class="topinfo">
        <div class="post">家庭详细住址</div>
        <div>
          <input
            type="text"
            placeholder="请输入家庭详细住址"
            v-model="form.address"
          />
        </div>
      </div>
      <div class="topinfo">
        <div class="post">离家最近的公交站或标志性建筑</div>
        <div>
          <input
            type="text"
            placeholder="请输入"
            v-model="form.jz"
          />
        </div>
      </div>
      <div class="topinfo">
        <div class="post">第一联系人姓名</div>
        <div>
          <input
            type="text"
            placeholder="请输入第一联系人"
            v-model="form.contact1"
          />
        </div>
      </div>
      <div class="topinfo">
        <div class="post">关系</div>
        <div>
          <input
            type="text"
            placeholder="请输入关系"
            v-model="form.relationship1"
          />
        </div>
      </div>
      <div class="topinfo">
        <div class="post">有效联系电话</div>
        <div>
          <input
            type="text"
            placeholder="请输入有效联系电话"
            v-model="form.phone1"
          />
        </div>
      </div>
      <div class="topinfo">
        <div class="post">第二联系人姓名</div>
        <div>
          <input
            type="text"
            placeholder="请输入第二联系人"
            v-model="form.contact2"
          />
        </div>
      </div>
      <div class="topinfo">
        <div class="post">关系</div>
        <div>
          <input
            type="text"
            placeholder="请输入关系"
            v-model="form.relationship2"
          />
        </div>
      </div>
      <div class="topinfo">
        <div class="post">有效联系电话</div>
        <div>
          <input
            type="text"
            placeholder="请输入电话"
            v-model="form.phone2"
          />
        </div>
      </div>
      <div class="topinfo">
        <div class="post">其他联系人姓名</div>
        <div>
          <input
            type="text"
            placeholder="其他联系人姓名"
            v-model="form.qtlxr"
          />
        </div>
      </div>
      <div class="topinfo">
        <div class="post">关系</div>
        <div>
          <input
            type="text"
            placeholder="请输入关系"
            v-model="form.gx3"
          />
        </div>
      </div>
      <div class="topinfo">
        <div class="post">其他联系电话</div>
        <div>
          <input
            type="text"
            placeholder="请输入电话"
            v-model="form.lxdh3"
          />
        </div>
      </div>
      <div class="topinfo">
        <div class="post">定点医疗机构一</div>
        <div>
          <input
            type="text"
            placeholder="定点医疗机构一"
            v-model="form.hospital1"
          />
        </div>
      </div>
      <div class="topinfo">
        <div class="post">定点医疗机构二</div>
        <div>
          <input
            type="text"
            placeholder="定点医疗机构二"
            v-model="form.hospital2"
          />
        </div>
      </div>
      <div class="topinfo">
        <div class="post">申请日期</div>
        <div  @click="showDatePickerP('signDate')">
          <p :style="{'color': form.signDate?'#333333' :'#cccccc'}">{{form.signDate ? form.signDate : '请选择'}}</p>
        </div>
      </div>
    </div>
    <button class="sign-btn" :style="showUsername ? 'background: #ccc;' : ''" :disabled="showUsername" @click="submit">{{showUsername ? "已提交" : "提交"}}</button>
    <picker
      title="请选择"
      :columns="pickerOptions.pickerColumns"
      @fetchData="setData"
      :show="show"
      @cancel="hidePicker"
      @hide="hidePicker"
    ></picker>
    <date-picker
      @fetchData='fetchDate'
      :show='showDatePicker'
      @cancel='hideDatePicker'
      @hide='hideDatePicker'
      date-type="date"
      :defaultDate='defaultDate'
    ></date-picker>
  </div>
</template>

<script>
import picker from '../components/picker';
import datePicker from '../components/datePicker';
import moment from 'moment';
import {jjdhazsavedata, jjdhazQueryJjdhaz} from '../assets/js/api';
const ly = {
  'bzxjz': '请注明离家最近的公交站点或标志性建筑物',
  'gddh': '固定电话',
  'jtxxzz': '家庭详细住址',
  'jwbs': '既往病史',
  'qtdh': '其他电话',
  'sjh': '手机号',
  'username': '姓名',
  'sex': '性别',
  'nation': '民族',
  'birthday': '出生年月',
  'sfzh': '身份证号'
};
export default {
  data() {
    return {
      showUsername: false,
      form: {
        name: '',
        peopleType: '',
        phone: '',
        otherPhone: '',
        tel: '',
        borthDate: '',
        sfzh: '',
        address: '',
        jwbl: '',
        jz: '',
        contact1: '',
        relationship1: '',
        phone1: '',
        contact2: '',
        relationship2: '',
        phone2: '',
        hospital1: '',
        hospital2: '',
        signDate: '',
        sex: '',
        qtlxr: '',
        gx3: '',
        lxdh3: ''
      },
      needzp: '',
      needzpFlag: '',
      needzpArr: [
        {
          label: '男',
          value: 1
        },
        {
          label: '女',
          value: 2
        }
      ],
      show: false,
      pickerOptions: {
        pickerColumns: []
      },
      showDatePicker: false,
      defaultDate: '',
      dspToken: localStorage.dspToken
    };
  },
  components: {
    picker,
    datePicker
  },
  mounted() {
    jjdhazQueryJjdhaz({
      dspToken: this.dspToken
    }).then(res => {
      if (res.errorInfo !== '0') {
        let data = res.data[0];
        if (data.username) {
          this.showUsername = true;
          this.form = {
            jz: data.bzxjz,
            hospital1: data.ddyljg1,
            hospital2: data.ddyljg2,
            phone: data.gddh,
            relationship1: data.gx1,
            relationship2: data.gx2,
            address: data.jtxxzz,
            jwbl: data.jwbs,
            phone1: data.lxdh1,
            phone2: data.lxdh2,
            contact1: data.lxr1,
            contact2: data.lxr2,
            otherPhone: data.qtdh,
            tel: data.sjh,
            signDate: data.sqrq,
            name: data.username,
            sex: data.sex,
            peopleType: data.nation,
            borthDate: data.birthday,
            sfzh: data.sfzh,
            qtlxr: data.qtlxr,
            gx3: data.gx3,
            lxdh3: data.lxdh3
          };
          this.sexFlag = data.sex;
        }
      }
    });
  },
  methods: {
    submit() {
      let obj = {
          dspToken: this.dspToken,
          bzxjz: this.form.jz,
          ddyljg1: this.form.hospital1,
          ddyljg2: this.form.hospital2,
          gddh: this.form.phone,
          gx1: this.form.relationship1,
          gx2: this.form.relationship2,
          jtxxzz: this.form.address,
          jwbs: this.form.jwbl,
          lxdh1: this.form.phone1,
          lxdh2: this.form.phone2,
          lxr1: this.form.contact1,
          lxr2: this.form.contact2,
          qtdh: this.form.otherPhone,
          sjh: this.form.tel,
          sqrq: this.form.signDate,
          username: this.form.name,
          sex: this.sexFlag,
          nation: this.form.peopleType,
          birthday: this.form.borthDate,
          sfzh: this.form.sfzh,
          qtlxr: this.form.qtlxr,
          gx3: this.form.gx3,
          lxdh3: this.form.lxdh3
        }, key = Object.keys(ly).find(key => !obj[key]);
      if (key) {
        this.$toast(`请填写【${ly[key]}】项内容`);
      } else {
        jjdhazsavedata(obj).then(res => {
          this.$toast('提交成功');
          history.go(-1);
        });
      }
    },
    showPicker(type) {
      this.type = type;
      this.show = true;
      if (type === 'sex') {
        this.pickerOptions.pickerColumns = this.needzpArr;
      }
    },
    hidePicker(d) {
      this.show = d.showPicker;
    },
    setData(d) {
      if (this.type === 'sex') {
        this.form.sex = d.value.label;
        this.sexFlag = d.value.value;
      }
      this.show = d.showPicker;
    },
    showDatePickerP(type) {
      this.showDatePicker = true;
      this.dateType = type;
      if (this.dateType === 'borthDate' && this.borthDate) {
        this.defaultDate = this.form.borthDate;
      } else if (this.dateType === 'signDate' && this.signDate) {
        this.defaultDate = this.form.signDate;
      } else {
        this.defaultDate = new Date();
      }
    },
    fetchDate(d) {
      if (this.dateType === 'signDate') {
        this.form.signDate = moment(d.originValue).format('YYYY-MM-DD');
      }
      if (this.dateType === 'borthDate') {
        this.form.borthDate = moment(d.originValue).format('YYYY-MM-DD');
      }
      this.showDatePicker = d.showDatePicker;
    },
    hideDatePicker(d) {
      this.showDatePicker = d.showDatePicker;
    }
  }
};
</script>

<style lang="less" scoped>
.installPhone {
  padding: 24px;
  .top {
    width: 704px;
    background-color: #ffffff;
    box-shadow: 3px 4px 9px 1px rgba(1, 88, 155, 0.05);
    border-radius: 8px;
    margin: 0 auto;
    .title {
      height: 64px;
      background-color: #3198ed;
      color: #ffffff;
      font-size: 30px;
      line-height: 64px;
      padding: 0 16px;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }
    .topinfo {
      display: flex;
      padding: 35px 18px;
      box-sizing: border-box;
      width: 674px;
      margin: 0 auto;
      font-size: 34px;
      color: #343434;
      &:not(:last-child) {
        border-bottom: 1px solid #eeeeee;
      }
      .post {
        color: #888888;
        text-align: left;
      }
      div:last-child {
        flex: 1;
        text-align: right;
        input {
          text-align: right;
        }
      }
    }
  }
  .sign-btn {
    border: none;
    width: 704px;
    height: 90px;
    background-color: #3198ed;
    box-shadow: 0px 5px 5px 0px rgba(89, 166, 250, 0.1);
    border-radius: 45px;
    line-height: 90px;
    color: #ffffff;
    font-size: 36px;
    text-align: center;
    margin: 26px auto;
    letter-spacing: 7px;
  }
  .historylist {
    .historytitle {
      color: #888888;
      font-size: 30px;
      margin: 19px 0;
    }
    .item {
      width: 704px;
      // height: 140px;
      background-color: #ffffff;
      box-shadow: 3px 4px 9px 1px rgba(1, 88, 155, 0.05);
      border-radius: 8px;
      margin: 0 auto;
      margin-top: 23px;
      position: relative;
      padding: 31px 30px 26px 33px;
      box-sizing: border-box;
      display: flex;
      &::before {
        content: "";
        width: 5px;
        // height: 140px;
        background-color: #3198ed;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
      }
      > div:first-child {
        flex: 1;
        p:first-child {
          color: #888888;
          font-size: 30px;
        }
        p:last-child {
          width: calc(100vw - 160px);
          color: #353535;
          font-size: 34px;
          // white-space: nowrap;
          // text-overflow: ellipsis;
          // overflow: hidden;
        }
      }
      > div:last-child {
        width: 50px;
        font-size: 34px;
        color: #b2b2b2;
        align-self: center;
        text-align: right;
      }
    }
  }
}
</style>
